import React, { Component } from "react";
import { NavBar, WingBlank, WhiteSpace } from "antd-mobile";
import { Switch, Route, Redirect } from "react-router-dom";

import NavFoot from "../../components/footer";
import Recommend from "../recommend";
import Ranking from "../ranking";
import Search from "../search";
import BillBoard from "../billBoard";

export default class index extends Component {
  // 给组件对象添加属性
  navList = [
    // 包含所有导航组件的相关信息数据
    {
      path: "/recommend", // 路由路径
      component: Recommend,
      title: "推荐",
      icon: "recommend",
      text: "推荐"
    },
    {
      path: "/ranking", // 路由路径
      component: Ranking,
      title: "排行榜",
      icon: "ranking",
      text: "排行榜"
    },
    {
      path: "/search", // 搜索
      component: Search,
      title: "搜索",
      icon: "search",
      text: "搜索"
    }
  ];

  render() {
    const { navList } = this;
    let path = this.props.location.pathname; // 请求的路径
    if (path === "/") {
      // 得到一个重定向的路由路径
      path = "/recommend";
      return <Redirect to="/recommend" />;
    }
    const currentNav = navList.find(nav => nav.path === path); // 得到当前的nav, 可能没有
    return (
      <div>
        {currentNav ? (
          <NavBar className="sticky-header">{currentNav.title}</NavBar>
        ) : null}

        {/* <NavBar className="sticky-header">{currentNav.title}</NavBar> */}
        <div>
          <Switch>
            {navList.map(nav => (
              <Route key={nav.path} path={nav.path} component={nav.component} />
            ))}
            <Route path="/billBoard/:billBoardId/:navTitle/:type" component={BillBoard} />
          </Switch>
        </div>
        {currentNav ? <NavFoot navList={navList} /> : null}
      </div>
    );
  }
}
